import { View, Text, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import { zhBorderColor, zhBorderWidth, zhSpacingColBase, zhSpacingColLg, zhSpacingColSm, zhSpacingRowBase, zhSpacingRowLg, zhThemeColor } from '../global'

export default function ZhTabsHeader({change}) { 
  //状态变量 —— 记录当前选中的页签下标    current：当前的
  let [cur, setCur] = useState(0)

  return (
    <View style={ss.header}>
      <Text onPress={_=>{setCur(0);change(0)}} style={[ss.item, {borderBottomColor:cur===0?zhThemeColor:'transparent'}]}>商 品</Text>
      <Text onPress={_=>{setCur(1);change(1)}} style={[ss.item, {borderBottomColor:cur===1?zhThemeColor:'transparent'}]}>评 价</Text>
      <Text onPress={_=>{setCur(2);change(2)}} style={[ss.item, {borderBottomColor:cur===2?zhThemeColor:'transparent'}]}>介 绍</Text>
    </View>
  )
}

let ss = StyleSheet.create({
  header:{
    flexShrink:0, //尺寸收缩权重：0 —— 即使兄弟的高度空间不够，也不能挤页头
    flexDirection: 'row', //弹性容器的主轴方向：横向
    alignItems: 'center', //子元素在交叉轴上居中对齐
    paddingVertical: zhSpacingColLg, //竖直方向上的内边距
    paddingHorizontal: zhSpacingRowLg, //水平方向上的内边距
    borderBottomColor: zhBorderColor, //下边框
    borderBottomWidth: zhBorderWidth,
    marginBottom: zhSpacingColBase, //下方的外间距
  },
  item: {
    fontSize: 14, //字体大小
    marginHorizontal: zhSpacingRowLg, //水平外间距
    paddingHorizontal: zhSpacingRowBase, //水平内边距
    paddingBottom: zhSpacingColSm, //下方的内边距
    borderBottomColor: zhThemeColor, //下边框
    borderBottomWidth: zhBorderWidth,
  },
})